<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			 width: 100%;
			 background: black;
			 height: 50px;
		}
		.center{
			width: 90%;
			height: 100%;
			background: skyblue;
			margin: 0 auto;
		}
		.banner{
			width: 90%;
			margin: 0 auto;
			background: pink;
		}
		.centent{
			background: hotpink;
		}
	    .foot{
	    	width: 100%;
	    	background: green;
	    }
	</style>
</head>
<body>
	<!-- 
        1.每个功能模块开始的地方最好加注释
        2.代码缩进 tab往右缩进 shift+ tab左缩进
        3.除非有固定高度，在没有明确高度的时候，不要设置高度，通过内容和设置内外边距把父元素高度撑起来
        4.命名要求，做到见名知意（不要用拼音，要有含义，）

	 -->
    <!--  导航开始 -->
    <div class="nav">
    	<div class="center">
    		<h1>导航区域</h1>
    	</div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    	<h1>轮播图</h1>
    </div>
    <div class="centent center">
    	<h1>恩师令</h1>
    	<h1>今日苍天把我命，让我写下恩师令</h1>
    	<h1>莫乖徒儿笨笨的，是我恩师棒棒的</h1>
    	<h1>杀师令</h1>
    	<h1>杀师令</h1>
    	<h1>杀师令</h1>
    	<h1>杀师令</h1>

    </div>
    <!-- 底部区域 -->
    <div class="foot">
    	<div class="center">
    		<h1>底部</h1>
    		<h1>底部</h1>
    		<h1>底部</h1>
    		<h1>底部</h1>
    		
    	</div>
    </div>
</body>
</html>